<template>
<div id="bkg">
    <el-row class = "top_box">
        <el-col :span="2">
            <el-button style="border-radius:20px;margin:5px 0px 0px 30px;box-shadow:0px 0px 20px #9370DB" @click="toIndex()"><i class="el-icon-caret-left" />首页</el-button>
            <!-- <router-link style="text-align:left" to="/admin"><el-button type="text" style="font-size:16px">&lt;&lt;首页</el-button></router-link> -->
        </el-col>
        <el-col :span="20" style="font-size:28px;letter-spacing:10px;color:#fbf8ff;margin-top:5px;text-align:center">
            我发布的问卷
        </el-col>
        <el-col :span="2">
        <el-avatar :size="50" style="font-size:30px;box-shadow:0px 0px 20px #9370DB" icon="el-icon-user-solid"></el-avatar>
        </el-col>
    </el-row>
    <el-container style="min-height:1000px">
        <!-- 顶部 -->
        <el-container>
        <!-- 左侧菜单 -->
        <el-aside width="200px"
        style="background-color:rgba(162, 143, 202, 0.3); height:900px;margin-top:20px">
            <leftMenu
            :default-active="this.$router.path"
            @choosePath="choosePath"
            ></leftMenu>
        </el-aside>

        <el-main style="text-align: left;margin-left:50px;margin-top:30px;padding: 100px 0 0 250px">
            <el-row>
            <el-col :span="13">
            <div class="el-button-group" style="float:left;box-shadow:0px 0px 10px #9370DB">
                <slot>
                <el-button type="success" style="width:80px; border-radius:0; margin-right:1px;font-size:16px" v-on:click="getTableState(0)">all</el-button>
                <el-button type="success" style="width:90px; border-radius:0; margin-right:1px;font-size:16px" v-on:click="getTableState(1)">已完结</el-button>
                <el-button type="success" style="width:90px; border-radius:0; margin-right:1px;font-size:16px" v-on:click="getTableState(2)">发布中</el-button>
                <el-button type="success" style="width:105px; border-radius:0; margin-right:1px;font-size:16px" v-on:click="getTableState(3)">即将发布</el-button>
                <el-button type="success" style="width:80px; border-radius:0; margin-right:1px;font-size:16px" v-on:click="getTableState(4)">草稿</el-button>
                </slot>
            </div>
            </el-col>
            <el-col :span="11">
            <inputSearch 
            placeholder="请输入关键字" 
            v-model="keywords"
            @goSearch="searchKeywords"
            @selectField="selectField"
            :searchFields="searchFields"
            />
            </el-col>
            </el-row>

            <el-table 
            :data="targetDataArr"
            border
            height="500"
            style="width: 1420px;font-size:18px"
            >
                <el-table-column
                    prop="qname"
                    label="问卷名称"
                    width="220">
                    <template slot-scope="scope">
                        <el-button @click="openQuestionnair(scope.row.id)" type="text">
                                <p style="float:left;font-size:18px">{{scope.row.qname}}</p>
                                <i class="el-icon-search"></i>
                        </el-button>
                        
                    </template>
                </el-table-column>
                <el-table-column
                    prop="public"
                    label="结果公开"
                    width="220">
                </el-table-column>
                <el-table-column
                    prop="anonymous"
                    label="是否匿名"
                    width="220">
                </el-table-column>
                <el-table-column
                    prop="start_time"
                    label="开始时间"
                    width="220">
                </el-table-column>
                <el-table-column
                    prop="end_time"
                    label="结束时间"
                    width="220">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="299">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.State==2||scope.row.State==3" type="info" @click="retreatItem(scope.row)">撤回</el-button>
                        <el-button v-if="scope.row.State==2||scope.row.State==3" type="warning" @click="endItem(scope.row)">终止</el-button>
                        <el-button v-if="scope.row.State==1||scope.row.State==2" type="success" @click="delayItem(scope.row)">延期</el-button>
                        <el-button v-if="scope.row.State==1||scope.row.State==4" type="danger" @click="deleteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button 
            type="success" 
            style="width:150px; border-radius:0; margin-left=80px;font-size:16px;box-shadow:0px 0px 10px #9370DB" 
            @click="toNew()">
                + 新建调查问卷
            </el-button>
        </el-main>
        <!-- 延期对话框 -->
        <el-dialog 
        :title="delayData.qname" 
        :visible.sync="dialogFormVisible" 
        width="600px"
        >
            <el-form
            ref="delayItemRef" :model="delayData"
            style="margin-left:100px;font-size:18px"
            >
                <!-- <p>开始时间：{{delayData.start_time}}</p> -->
                <!-- <p>结束时间</p> -->
                <el-form-item label="开始时间">
                    <el-date-picker
                    v-model="delayData.start_time"
                    type="datetime"
                    placeholder="选择日期时间"
                    disabled
                    style="padding-right:50px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="end_time">
                    <el-date-picker
                    v-model="delayData.end_time"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="padding-right:50px">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="cancel">取 消</el-button> -->
                <el-button type="primary" @click="delayConfirm">确 定</el-button>
            </span>
        </el-dialog>
        </el-container>
        
    </el-container>
</div>
</template>

<style>
#bkg {
    background: url("../pics/purple5.png");
    background-size: 100% 100%;
    height: 100%;
    background-attachment: fixed;
}
</style>

<script>
import leftMenu from '../components/myComponents/leftMenu'
import inputSearch from '../components/myComponents/inputSearch'
let allMyCreatedData = []
let targetDataArr = [].concat(allMyCreatedData)
let delayData = []
let tableState = 0
let searchFields
export default {
    name: 'MyCreated',
    components:{
        inputSearch, leftMenu
    },
    data ()
    {
        return {
            activeItem:"myCreated",
            allMyCreatedData,
            dialogFormVisible: false,
            tableState,
            targetDataArr,
            delayData:{ //延期对话框的model
                id: '',
                qname: '',
                start_time: '',
                end_time: '',
                State: ''
            },
            keywords:'',
            searchFields:['问卷名称']
        }
    },
    
    methods:{

        choosePath(key){
            switch (key) {
                case "myReceived":
                    this.$router.push({path: '/myReceived'})
                    break;
                case "statistics":
                    this.$router.push({path: '/statistics'})
                    break;
                case "myCreated":
                    break;
                case "myModels":
                    this.$router.push({path: '/myModels'})
                    break;
                default:
                    break;
            }
        },

        //回首页
        toIndex: function () {
            this.$router.push({path: '/admin'})
        },

        //返回满足tableState的数据
        getData: function(){
            //求此刻时间nowTime
            let date = new Date()
            let month = date.getMonth()+1
            if(month<10){
                month = "0"+month
            }
            let nowTime = date.getFullYear()+"-"+month+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
            console.log("nowTime:"+nowTime)
            console.log("tableState:"+tableState)
            console.log("-----------")
            //all data
            if(tableState==0){
                this.targetDataArr = [].concat(allMyCreatedData)
            }
            //已完结
            if(tableState==1){
                this.targetDataArr = []
                allMyCreatedData.forEach(element => {
                    if(element.end_time<=nowTime&&element.State==1){
                        this.targetDataArr.push(element)
                    }
                })
            }
            //发布中
            if(tableState==2){
                this.targetDataArr = []
                allMyCreatedData.forEach(element => {
                    if(element.start_time<nowTime&&element.end_time>nowTime&&element.State==2){
                        this.targetDataArr.push(element)
                    }
                })
            }
            //即将发布
            if(tableState==3){
                this.targetDataArr = []
                allMyCreatedData.forEach(element => {
                    if(element.start_time>=nowTime&&element.State==3){
                        this.targetDataArr.push(element)
                    }
                })
            }
            //草稿
            if(tableState==4){
                this.targetDataArr = []
                allMyCreatedData.forEach(element => {
                    if(element.State==4){
                        this.targetDataArr.push(element)
                    }
                })
            }
            return this.targetDataArr
        },

        //选择搜索类型
        selectField: function(field){
            this.selectedField = field
        },

        //搜索事件
        searchKeywords: function(keywords){
            this.targetDataArr = [].concat(allMyCreatedData)
            let temp = []
            if(this.selectedField){
                console.log(this.selectedField)
                if(this.selectedField=='问卷名称'){
                    this.targetDataArr.forEach(item => {
                        let title = item.qname
                        if(title.search(keywords)!==-1){
                            temp.push(item)
                        }
                    })
                }
                if(this.selectedField=='答卷人'){
                    this.targetDataArr.forEach(item => {
                        if(item.answerer){
                            let name = item.answerer
                            if(name.search(keywords)!==-1){
                                temp.push(item)
                            }
                        }
                    })
                }
                this.targetDataArr = [].concat(temp)
                return this.targetDataArr
            }
            else{
                this.$alert("请选择搜索类型","提示",{
                    confirmButtonText: '确定',
                    center: true,
                    callback: () => {}
                })
            }
        },

        //获取当前列表
        getTableState: function(x){
            //清空目前数据列表
            let arr = []
            this.targetDataArr = [].concat(arr)
            tableState = x
            //tableState更新后重新执行getData
            this.getData()
            return this.tableState
        },

        //撤回
        retreatItem: function(item){
            let n = allMyCreatedData.indexOf(item)
            allMyCreatedData[n].State = 4
        },

        //终止
        endItem: function (item) {
            let n = allMyCreatedData.indexOf(item)
            allMyCreatedData[n].State = 1
        },
        

        //延期
        delayItem: function (item) {
            let n = allMyCreatedData.indexOf(item)
            this.delayData = {id:n, qname:item.qname, start_time:item.start_time, end_time:item.end_time}
            this.dialogFormVisible = true
        },

        //延期确认
        delayConfirm: function (){
             this.$refs.delayItemRef.validate(valid => {
                if(!valid){
                    return
                }
                else {
                    let year = this.delayData.end_time.getFullYear()
                    let month = this.delayData.end_time.getMonth()+1
                    let day = this.delayData.end_time.getDate()
                    let hour = this.delayData.end_time.getHours()
                    let minute = this.delayData.end_time.getMinutes()
                    let second = this.delayData.end_time.getSeconds()
                    let m
                    if(hour<10){
                        hour = "0"+hour
                    }
                    if(minute<10){
                        minute = "0"+minute
                    }
                    if(second<10){
                        second = "0"+second
                    }
                    let time = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
                    allMyCreatedData[this.delayData.id].end_time = time
                    allMyCreatedData[this.delayData.id].State = 2
                    console.log("延期至："+time)
                    this.getData()
                }
            })
            this.dialogFormVisible = false
        },

        // 删除
        deleteItem: function(item){
            let n = allMyCreatedData.indexOf(item)
            allMyCreatedData.splice(n, 1)
            this.getData()
        },

        //查看问卷
        openQuestionnair: function(id) {
            this.$router.push({path: '/answer', query: {questionnaire_id: id}})
        },

        //跳转到新建问卷页面
        toNew: function () {
            this.$router.push({path: '/newQuestionnair'})
        }
    },

    mounted(){
        this.$http.get('/getQuestionnairList').then(res => {
            allMyCreatedData = res.data.data
            console.log("questionnairList:")
            console.log(allMyCreatedData)
            this.getData()
        })
    }
}
</script>
